<script lang="ts" setup>
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { message } from 'ant-design-vue';
import { getGoodsPage } from '#/api/shop/goods';

const emit = defineEmits<{
  (e: 'add', row: any): void;
}>();

function getImageUrl(imagePath?: string) {
  if (!imagePath) return '';
  return `/shop-img-api/${imagePath}`;
}

const [Grid, gridApi] = useVbenVxeGrid({
  formOptions: {
    schema: [
      { fieldName: 'goods_name', label: '名称', component: 'Input', componentProps: { placeholder: '商品名' } },
      { fieldName: 'goods_type', label: '类型', component: 'Select', componentProps: { options: [ { label: '虚拟', value: 'virtual' }, { label: '实物', value: 'physical' } ], allowClear: true } },
      { fieldName: 'status', label: '状态', component: 'Select', defaultValue: 1, componentProps: { options: [ { label: '启用', value: 1 }, { label: '禁用', value: 0 } ] } },

    ],
  },
  gridOptions: {
    minHeight: 300,
    columns: [
      { field: 'goods_cover_thumb_small', title: '图片', width: 80, slots: { default: 'goodsImg' } },
      { field: 'goods_name', title: '名称', minWidth: 160, showOverflow: true },
      { field: 'goods_type_name', title: '类型', width: 120 },
      { field: 'price', title: '单价', width: 100, slots: { default: 'price' } },
      { field: 'stock', title: '库存', width: 80 },
      { title: '操作', width: 110, fixed: 'right', slots: { default: 'actions' } },
    ],
    pagerConfig: {
      enabled: true,
    },
    proxyConfig: {
      ajax: {
        query: async ({ page }, formValues) => {
          try {
            const params = {
              page: page.currentPage,
              limit: page.pageSize,
              ...formValues,
            } as any;
            const resp = await getGoodsPage(params);
            const data = Array.isArray((resp as any)?.data) ? (resp as any).data : [];
            const total = (resp as any)?.total || 0;
            const rows = data.map((g: any) => ({ ...g, price: g?.goodsSku?.price || 0 }));
            return { list: rows, total } as any;
          } catch {
            message.error('获取商品列表失败');
            return { list: [], total: 0 } as any;
          }
        },
      },
    },
    rowConfig: {
      keyField: 'goods_id',
      isHover: true,
    },
    toolbarConfig: {
      search: true,
      refresh: true,
    },
  },
});

defineExpose({ gridApi });
</script>

<template>
  <Grid>
    <template #goodsImg="{ row }">
      <a-image v-if="row?.goods_cover_thumb_small" :src="getImageUrl(row.goods_cover_thumb_small)" :width="40" :height="40" :preview="false" />
      <span v-else>-</span>
    </template>
    <template #price="{ row }">
      ¥{{ Number(row?.price || 0).toFixed(2) }}
    </template>
    <template #actions="{ row }">
      <a-button
        type="primary"
        size="small"
        :disabled="row?.goods_type === 'physical' && Number(row?.stock || 0) <= 0"
        @click="emit('add', row)"
      >加入</a-button>
    </template>
  </Grid>
</template>

<style scoped>
</style>


